<template>
  <a-modal title="图标库"
           :visible="visible"
           @ok="handleOk"
           @cancel="handleCancel"
           :width="1000">
    <div class="icon_win">
      <div class="icon_menu">
        <a-menu :defaultSelectedKeys="Menukey"
                mode="inline"
                :inlineCollapsed="false"
                @click="toggleMenu">
          <a-menu-item key="1">
            <a-icon type="tool"
                    theme='filled' />
            <span>填充</span>
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon type="tool"
                    theme='outlined' />
            <span>线条</span>
          </a-menu-item>
          <a-menu-item key="3">
            <a-icon type="tool"
                    theme='twoTone' />
            <span>半填充</span>
          </a-menu-item>
        </a-menu>
      </div>
      <div class="icon_con">
        <div class="icon_list"
             v-if="Menukey.includes('1')">
          <div class="aIcon"
               v-for="item in iconList.fill"
               :key="item"
               @click="addIcon(item,'filled')">
            <a-icon :type="item"
                    theme='filled' />
          </div>
        </div>
        <div class="icon_list"
             v-if="Menukey.includes('2')">
          <div class="aIcon"
               v-for="item in iconList.outline"
               :key="item"
               @click="addIcon(item,'outlined')">
            <a-icon :type="item"
                    theme='outlined' />
          </div>
        </div>
        <div class="icon_list"
             v-if="Menukey.includes('3')">
          <div class="aIcon"
               v-for="item in iconList.twotone"
               :key="item"
               @click="addIcon(item,'twoTone')">
            <a-icon :type="item"
                    theme='twoTone' />
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script >
import Vue from "vue";
import { getUPloadImage, getDefaultImg } from "@/api/index";
import { baseIcon } from "@/utils/baseReact";
export default Vue.extend({
  data () {
    return {
      Menukey: ["1"],
      headers: {
        authorization: "authorization-text"
      },
      iconList: {
        fill: [
          'account-book',
          'alert',
          'alipay-circle',
          'aliwangwang',
          'android',
          'api',
          'appstore',
          'audio',
          'apple',
          'backward',
          'bank',
          'bell',
          'behance-square',
          'book',
          'box-plot',
          'bug',
          'bulb',
          'calculator',
          'build',
          'calendar',
          'camera',
          'car',
          'caret-down',
          'caret-left',
          'caret-right',
          'carry-out',
          'caret-up',
          'check-circle',
          'check-square',
          'chrome',
          'clock-circle',
          'close-circle',
          'cloud',
          'close-square',
          'code',
          'codepen-circle',
          'compass',
          'contacts',
          'container',
          'control',
          'copy',
          'credit-card',
          'crown',
          'customer-service',
          'dashboard',
          'delete',
          'diff',
          'database',
          'dislike',
          'down-circle',
          'down-square',
          'dribbble-square',
          'environment',
          'edit',
          'exclamation-circle',
          'experiment',
          'eye-invisible',
          'eye',
          'facebook',
          'fast-backward',
          'fast-forward',
          'file-add',
          'file-excel',
          'file-exclamation',
          'file-image',
          'file-markdown',
          'file-pdf',
          'file-ppt',
          'file-text',
          'file-unknown',
          'file-word',
          'file-zip',
          'file',
          'filter',
          'fire',
          'flag',
          'folder-add',
          'folder',
          'folder-open',
          'forward',
          'frown',
          'fund',
          'funnel-plot',
          'gift',
          'github',
          'gitlab',
          'hdd',
          'heart',
          'highlight',
          'home',
          'hourglass',
          'html5',
          'idcard',
          'info-circle',
          'instagram',
          'insurance',
          'interaction',
          'layout',
          'left-circle',
          'left-square',
          'like',
          'linkedin',
          'lock',
          'mail',
          'medicine-box',
          'meh',
          'message',
          'minus-circle',
          'minus-square',
          'mobile',
          'money-collect',
          'pause-circle',
          'pay-circle',
          'notification',
          'phone',
          'picture',
          'pie-chart',
          'play-circle',
          'play-square',
          'plus-circle',
          'plus-square',
          'printer',
          'profile',
          'project',
          'pushpin',
          'property-safety',
          'question-circle',
          'read',
          'reconciliation',
          'red-envelope',
          'rest',
          'right-circle',
          'rocket',
          'right-square',
          'safety-certificate',
          'save',
          'schedule',
          'security-scan',
          'setting',
          'shop',
          'shopping',
          'skin',
          'skype',
          'slack-square',
          'sliders',
          'smile',
          'snippets',
          'sound',
          'star',
          'step-backward',
          'step-forward',
          'stop',
          'switcher',
          'tablet',
          'tag',
          'tags',
          'taobao-circle',
          'tool',
          'thunderbolt',
          'trophy',
          'unlock',
          'up-circle',
          'up-square',
          'usb',
          'video-camera',
          'wallet',
          'warning',
          'wechat',
          'weibo-circle',
          'windows',
          'yahoo',
          'weibo-square',
          'yuque',
          'youtube',
        ],
        outline: [
          'account-book',
          'alert',
          'alipay-circle',
          'aliwangwang',
          'android',
          'api',
          'appstore',
          'audio',
          'apple',
          'backward',
          'bank',
          'bell',
          'behance-square',
          'book',
          'box-plot',
          'bug',
          'bulb',
          'calculator',
          'build',
          'calendar',
          'camera',
          'car',
          'caret-down',
          'caret-left',
          'caret-right',
          'carry-out',
          'caret-up',
          'check-circle',
          'check-square',
          'chrome',
          'clock-circle',
          'close-circle',
          'cloud',
          'close-square',
          'code',
          'codepen-circle',
          'compass',
          'contacts',
          'container',
          'control',
          'copy',
          'credit-card',
          'crown',
          'customer-service',
          'dashboard',
          'delete',
          'diff',
          'database',
          'dislike',
          'down-circle',
          'down-square',
          'dribbble-square',
          'environment',
          'edit',
          'exclamation-circle',
          'experiment',
          'eye-invisible',
          'eye',
          'facebook',
          'fast-backward',
          'fast-forward',
          'file-add',
          'file-excel',
          'file-exclamation',
          'file-image',
          'file-markdown',
          'file-pdf',
          'file-ppt',
          'file-text',
          'file-unknown',
          'file-word',
          'file-zip',
          'file',
          'filter',
          'fire',
          'flag',
          'folder-add',
          'folder',
          'folder-open',
          'forward',
          'frown',
          'fund',
          'funnel-plot',
          'gift',
          'github',
          'gitlab',
          'hdd',
          'heart',
          'highlight',
          'home',
          'hourglass',
          'html5',
          'idcard',
          'info-circle',
          'instagram',
          'insurance',
          'interaction',
          'layout',
          'left-circle',
          'left-square',
          'like',
          'linkedin',
          'lock',
          'mail',
          'medicine-box',
          'meh',
          'message',
          'minus-circle',
          'minus-square',
          'mobile',
          'money-collect',
          'pause-circle',
          'pay-circle',
          'notification',
          'phone',
          'picture',
          'pie-chart',
          'play-circle',
          'play-square',
          'plus-circle',
          'plus-square',
          'printer',
          'profile',
          'project',
          'pushpin',
          'property-safety',
          'question-circle',
          'read',
          'reconciliation',
          'red-envelope',
          'rest',
          'right-circle',
          'rocket',
          'right-square',
          'safety-certificate',
          'save',
          'schedule',
          'security-scan',
          'setting',
          'shop',
          'shopping',
          'skin',
          'skype',
          'slack-square',
          'sliders',
          'smile',
          'snippets',
          'sound',
          'star',
          'step-backward',
          'step-forward',
          'stop',
          'switcher',
          'tablet',
          'tag',
          'tags',
          'taobao-circle',
          'tool',
          'thunderbolt',
          'trophy',
          'unlock',
          'up-circle',
          'up-square',
          'usb',
          'video-camera',
          'wallet',
          'warning',
          'wechat',
          'weibo-circle',
          'windows',
          'yahoo',
          'weibo-square',
          'yuque',
          'youtube',
          'alibaba',
          'align-center',
          'align-left',
          'align-right',
          'alipay',
          'aliyun',
          'amazon',
          'ant-cloud',
          'apartment',
          'ant-design',
          'area-chart',
          'arrow-left',
          'arrow-down',
          'arrow-up',
          'arrows-alt',
          'arrow-right',
          'audit',
          'bar-chart',
          'barcode',
          'bars',
          'behance',
          'bg-colors',
          'block',
          'bold',
          'border-bottom',
          'border-left',
          'border-outer',
          'border-inner',
          'border-right',
          'border-horizontal',
          'border-top',
          'border-verticle',
          'border',
          'branches',
          'check',
          'ci',
          'close',
          'cloud-download',
          'cloud-server',
          'cloud-sync',
          'cloud-upload',
          'cluster',
          'codepen',
          'code-sandbox',
          'column-width',
          'column-height',
          'coffee',
          'copyright',
          'dash',
          'deployment-unit',
          'desktop',
          'dingding',
          'disconnect',
          'dollar',
          'double-left',
          'dot-chart',
          'double-right',
          'down',
          'drag',
          'download',
          'dribbble',
          'dropbox',
          'ellipsis',
          'enter',
          'euro',
          'exception',
          'exclamation',
          'export',
          'fall',
          'file-done',
          'file-jpg',
          'file-protect',
          'file-sync',
          'file-search',
          'font-colors',
          'font-size',
          'fork',
          'form',
          'fullscreen-exit',
          'fullscreen',
          'gateway',
          'global',
          'google-plus',
          'gold',
          'google',
          'heat-map',
          'history',
          'ie',
          'import',
          'inbox',
          'info',
          'italic',
          'key',
          'issues-close',
          'laptop',
          'left',
          'line-chart',
          'link',
          'line-height',
          'line',
          'loading-3-quarters',
          'loading',
          'login',
          'logout',
          'man',
          'medium',
          'medium-workmark',
          'menu-unfold',
          'menu-fold',
          'menu',
          'minus',
          'monitor',
          'more',
          'ordered-list',
          'number',
          'pause',
          'percentage',
          'paper-clip',
          'pic-center',
          'pic-left',
          'pic-right',
          'plus',
          'pound',
          'poweroff',
          'pull-request',
          'qq',
          'question',
          'radar-chart',
          'qrcode',
          'radius-bottomleft',
          'radius-bottomright',
          'radius-upleft',
          'radius-setting',
          'radius-upright',
          'reddit',
          'redo',
          'reload',
          'retweet',
          'right',
          'rise',
          'rollback',
          'safety',
          'robot',
          'scan',
          'search',
          'scissor',
          'select',
          'shake',
          'share-alt',
          'shopping-cart',
          'shrink',
          'sketch',
          'slack',
          'small-dash',
          'solution',
          'sort-descending',
          'sort-ascending',
          'stock',
          'swap-left',
          'swap-right',
          'strikethrough',
          'swap',
          'sync',
          'table',
          'team',
          'taobao',
          'to-top',
          'trademark',
          'transaction',
          'twitter',
          'underline',
          'undo',
          'unordered-list',
          'up',
          'upload',
          'user-add',
          'user-delete',
          'usergroup-add',
          'user',
          'usergroup-delete',
          'vertical-align-bottom',
          'vertical-align-middle',
          'vertical-align-top',
          'vertical-left',
          'vertical-right',
          'weibo',
          'wifi',
          'zhihu',
          'woman',
          'zoom-out',
          'zoom-in'
        ],
        twotone: [
          'account-book',
          'alert',
          'api',
          'appstore',
          'audio',
          'bank',
          'bell',
          'book',
          'box-plot',
          'bug',
          'bulb',
          'calculator',
          'build',
          'calendar',
          'camera',
          'car',
          'carry-out',
          'check-circle',
          'check-square',
          'clock-circle',
          'close-circle',
          'cloud',
          'close-square',
          'code',
          'compass',
          'contacts',
          'container',
          'control',
          'copy',
          'credit-card',
          'crown',
          'customer-service',
          'dashboard',
          'delete',
          'diff',
          'database',
          'dislike',
          'down-circle',
          'down-square',
          'environment',
          'edit',
          'exclamation-circle',
          'experiment',
          'eye-invisible',
          'eye',
          'file-add',
          'file-excel',
          'file-exclamation',
          'file-image',
          'file-markdown',
          'file-pdf',
          'file-ppt',
          'file-text',
          'file-unknown',
          'file-word',
          'file-zip',
          'file',
          'filter',
          'fire',
          'flag',
          'folder-add',
          'folder',
          'folder-open',
          'frown',
          'fund',
          'funnel-plot',
          'gift',
          'hdd',
          'heart',
          'highlight',
          'home',
          'hourglass',
          'html5',
          'idcard',
          'info-circle',
          'insurance',
          'interaction',
          'layout',
          'left-circle',
          'left-square',
          'like',
          'lock',
          'mail',
          'medicine-box',
          'meh',
          'message',
          'minus-circle',
          'minus-square',
          'mobile',
          'money-collect',
          'pause-circle',
          'notification',
          'phone',
          'picture',
          'pie-chart',
          'play-circle',
          'play-square',
          'plus-circle',
          'plus-square',
          'printer',
          'profile',
          'project',
          'pushpin',
          'property-safety',
          'question-circle',
          'reconciliation',
          'red-envelope',
          'rest',
          'right-circle',
          'rocket',
          'right-square',
          'safety-certificate',
          'save',
          'schedule',
          'security-scan',
          'setting',
          'shop',
          'shopping',
          'skin',
          'sliders',
          'smile',
          'snippets',
          'sound',
          'star',
          'stop',
          'switcher',
          'tablet',
          'tag',
          'tags',
          'tool',
          'thunderbolt',
          'trophy',
          'unlock',
          'up-circle',
          'up-square',
          'usb',
          'video-camera',
          'wallet',
          'warning',
          'ci',
          'copyright',
          'dollar',
          'euro',
          'gold',
        ],
      }
    };
  },
  mounted () {
    this.init();
  },
  computed: {
    type () {
      return this.$store.state.setting.iconWin.type;
    },
    visible () {
      return this.$store.state.setting.iconWin.show;
    }
  },
  methods: {
    init () {

    },
    handleOk () {
      this.$store.commit("setting/closeIconChoose");

    },
    handleCancel () {
      this.$store.commit("setting/closeIconChoose");
    },
    open (type) {
      this.$store.commit("setting/showIconChoose", type);
    },
    toggleMenu (value) {
      this.Menukey = value.keyPath;
    },
    addIcon (iconType, theme) {
      this.$store.commit("setting/closeIconChoose");
      if (this.type == 1) {
        this.$store.commit(
          "core/set_tempLate",
          baseIcon(this.$store.state.core, { iconType, theme })
        );
      } else if (this.type == 2) {
        this.$store.commit(
          "core/update_icon",
          { iconType, theme }
        );
      }
    },
  }
});
</script>

<style lang="less" scoped>
.icon_win {
  display: flex;
  .icon_menu {
    position: relative;
    height: 400px;
    border-right: 1px solid #e8e8e8;
    .item_file {
      position: absolute;
      bottom: 10px;
    }
  }
  .icon_con {
    overflow-y: scroll;
    height: 400px;
    margin-left: 20px;
    .icon_list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .aIcon{
        font-size: 50px;
        padding: 5px;
         margin-left: 20px;
          color:#555;
        margin-bottom: 30px;
         &:hover {
          cursor: pointer;
          outline: 1px solid #1890ff;
          transform: scale(1.1);
        }
      }
       
    }
  }
}
</style>